<!--
 * @Author: your name
 * @Date: 2020-07-18 18:31:25
 * @LastEditTime: 2020-10-15 14:28:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_plugins\src\views\swing\index.vue
-->
<!-- js代码段 -->
<template>
    <div class="container">
        <van-nav-bar title="卡片可拖拽" :border="false" left-arrow fixed @click-left="$router.go('-1')" />
        <van-button @click="add">Add card</van-button>
        <van-button @click="remove">Remove card</van-button>
        <van-button @click="swing">Swing card</van-button>
        <vue-swing class="swing_box" 
        @throwout="onThrowout" 
        @throwin="onThrowin" 
        :config="config" 
        ref="vueswing">
            <div v-for="(card,index) in cards" :key="card" class="card" :style="{'z-index':index}">
                <span>{{ card }}</span>
            </div>
        </vue-swing>
    </div>
</template>
<script>
import VueSwing from "vue-swing";
export default {
    name: "app",
    components: { VueSwing },
    data() {
        return {
            config: {
                allowedDirections: [
                    VueSwing.Direction.UP,
                    VueSwing.Direction.DOWN,
                    VueSwing.Direction.LEFT,
                    VueSwing.Direction.RIGHT
                ],
                minThrowOutDistance: 550,
                maxThrowOutDistance: 600
            },
            cards: [
                "A",
                "2",
                "3",
                "4",
                "5",
                "6",
                "7",
                "8",
                "9",
                "10",
                "J",
                "Q",
                "K"
            ],
            out_list: []
        };
    },
    methods: {
        add() {
            this.cards.push(`${this.cards.length + 1}`);
            // const cards = this.$refs.vueswing.cards;
        },
        remove() {
            this.swing();
            setTimeout(() => {
                this.cards.pop();
            }, 300);
        },
        swing() {
            const cards = this.$refs.vueswing.cards;
            const card_item = cards[cards.length - 1].throwOut(
                Math.random() * 100 - 50,
                Math.random() * 100 - 50
            );
            console.log("card_item", card_item);
        },
        onThrowout(ele) {
            console.log("ele", ele);
        },
        onThrowin(e) {
            console.log("e", e);
        },
        onThrowout({ target, throwDirection }) {
            console.log(`Threw out ${target.textContent}!`);
            console.log("throwDirection", throwDirection);
        }
    }
};
</script>
<style lang="less" scoped>
body {
    background-color: #444;
    margin: 0;
}

.card {
    align-items: center;
    border-radius: 30px;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    font-size: 144px;
    height: 600px;
    justify-content: center;
    left: calc(50% - 200px);
    position: absolute;
    top: calc(50% - 200px);
    width: 400px;
    background-color: rgb(53, 98, 221);
    color: #fff;
}
</style>